import React, { useState } from 'react';
import { Modal, Select, Input } from 'antd';
import { ButtonProps } from 'antd/lib/button';

import './index.css';

const { Option } = Select;
const OPS: string[] = ['==', '!=', '>', '<', '>=', '<=', 'in', 'not in', 'like', 'is null', 'is not null'];

//过滤
const FilterModal: React.FC<{
  params: Record<string, string>;
  isModalVisible: boolean;
  handleCancel: () => void;
  handleOk: (datasource: any) => void;
}> = ({ params, isModalVisible, handleCancel, handleOk }) => {
  //回调数据
  const [data, setData] = useState<{ op: string; val: any }>({ op: '==', val: '' });
  const okButtonProps: ButtonProps = { disabled: !data.val || !data.val?.length };
  const children: [] = [];

  function trims(e: string[]) {
    return e?.filter((i: string) => !!i.trim())?.map((i: string) => i?.replace(/\s+/g, ''));
  }

  return (
    <Modal
      title="过滤"
      visible={isModalVisible}
      onCancel={handleCancel}
      cancelText="取消"
      okText="确定"
      okButtonProps={okButtonProps}
      onOk={() => handleOk({ ...params, ...data })}
    >
      <section>
        过滤逻辑：
        <Select
          className="width-300 margin-bottom-16"
          value={data.op}
          onChange={op => setData(() => ({ val: op.includes('in') ? [] : op.includes('null') ? 'null' : '', op }))}
        >
          {OPS.map((t, index) => (
            <Option key={index} value={t}>
              {t}
            </Option>
          ))}
        </Select>
      </section>
      <section>
        {!data.op.includes('null') && (
          <span>
            <span className="font-color-red">&nbsp;&nbsp;*</span>过滤值：
          </span>
        )}
        {/* in 为 多选 */}
        {data.op.includes('in') ? (
          <Select mode="tags" className="width-350" value={data.val} onChange={e => setData({ ...data, val: trims(e) })}>
            {children}
          </Select>
        ) : (
          !data.op.includes('null') && (
            <Input className="width-350" value={data.val} allowClear onChange={e => setData({ ...data, val: e.target.value?.trim() })} />
          )
        )}
      </section>
    </Modal>
  );
};

export default FilterModal;
